<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 450px;
            margin: 40px auto;
            background:red url(../images/11.jpg) no-repeat;
            background-size: 500px 400px;
            position: relative;
        }
        .empty {
            width: 50px;
            height: 50px;
            background-color: rgba(0,0,0,0.8);
            box-shadow: 0 0 2px red;
            position: absolute;

            /* left: 300px;
            top: 300px; */
        }
        .range {
            width: 500px;
            height: 50px;
            background-color: #ff0;
            position: absolute;
            bottom: 0;
        }
        .block {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: #0f0;
            /* 不允许用户选中 */
            -webkit-user-select: none;
        }
        .show {
            width: 50px;
            height: 50px;
            background:red url(../images/11.jpg) no-repeat;
            background-size: 500px 400px;
           
            position: absolute;
            left: 0;

            /* top: 300px;
            background-position: -300px -300px; */
        }
    </style>
</head>
<body>

    <div class="box">
        <div class="empty"></div>
        <div class="show"></div>
        <div class="range">
            <div class="block">123</div>
        </div>
    </div>


    <script>


        // 1 滑动的验证的css    三个小盒子
        //    被挖空的位置和被挖空的图片要能对上  
        
        
        var oBox = document.querySelector('.box') ;
        var oShow = document.querySelector('.show') ;
        var oEmpty = document.querySelector('.empty') ;
        var oBlock = document.querySelector('.block') ;

        var maxX = oBox.clientWidth - oEmpty.offsetWidth ;
        var maxY = oBox.clientHeight - oEmpty.offsetHeight * 2 ;

        // 为了让挖空更贴近右边  不一定非要是/2
        var minX = oBox.clientWidth / 2 ; 

        randPosition() ;

        oBlock.onmousedown = function(e) {
            var gapX = e.x ;

            document.onmousemove = function(e) {
                var x = e.x - gapX ;
                if(x < 0) x = 0 ;
                if(x > maxX) x = maxX ;
                oBlock.style.left = x + 'px' ;
                oShow.style.left = x + 'px' ;
            }
        }

        document.onmouseup = function() {
            document.onmousemove = null ;
            console.log(oBlock.style.left);
            if(parseInt(oBlock.style.left) != 0) {
                // 判断是否重合
                if (Math.abs(parseInt(oShow.style.left) - parseInt(oEmpty.style.left)) <= 5) {
                    // alert(666) ;
                    location.href = 'http://www.baidu.com';
                }
                else {
                    randPosition();
                }
            }
        }
       



        function randPosition() {
            var x = rand(minX , maxX) ;
            var y = rand(0 , maxY) ;

            oEmpty.style.cssText = `left:${x}px;top:${y}px;` ;
            // oShow.style.top = y + 'px' ;
            // oShow.style.backgroundPosition = `-${x}px -${y}px` ;
            oShow.style.cssText = `top:${y}px;background-position:-${x}px -${y}px;` ;
            oBlock.style.left = 0 ;
        }

        function rand(min , max) {
            return parseInt(Math.random() * (max - min) + min) ;
        }

    </script>
    
</body>
</html>